<template>
	<view class="shopping-cart">
		<view class="page-bg-gray"></view>
		<view class="empty" v-if="dataList.length < 1">
			<u-empty text="收藏夹空空的" mode="favor" iconSize="180" fontSize="36"></u-empty>
		</view>
		<view class="cart-list">
			<u-swipe-action v-for="(item, index) in dataList" :btnWidth="btnWidth" @open="swipeActionOpen"
			@click="swipeActionClick"
			:key="index" :index="index" :show="item.show" :options="options">
				<view class="cart-item">
				<view class="select-btn" @click.stop="selectBtnClick(item)">
					<u-checkbox shape="circle" :value="isSelect(item)" :name="index"
					active-color="#d81e06"
					></u-checkbox>
				</view>
				<view class="goods-box" @click="gotoGoodsDetails(item.id)">
					<view class="pictrue">
						<image class="img" :src="photoBaseUrl + item.cover" mode=""></image>
					</view>
					<view class="info">
						<view class="goods-name">
							{{ item.goods_name }}
						</view>
						<view class="money">
							<view class="text">
								￥ {{ (item.sell_price / 100).toFixed(2) }}
							</view>
							<view class="text">
								佣 ￥ {{ (item.fenxiao_info.money / 100).toFixed(2) }}
							</view>
						</view>
					</view>
				</view>
				</view>
			</u-swipe-action>
			<view class="list-loadmore">
				<u-loadmore :status="status" />
			</view>
		</view>
		<view class="cart-bar">
			<view class="select-btn" @click="selectAll">
				<u-checkbox shape="circle" active-color="#d81e06" :value="isSelectAll"
				>全选</u-checkbox>
			</view>
			<view class="money">

			</view>
			<view class="btn">
				<view class="addSite" :class="(isDisabled) ? 'disabled':''"
				@click="settlement">
					<view class="add">
						<u-loading mode="flower" :show="isLoading"></u-loading> 删除 ({{selects.length}})
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _ from '@holyhigh/func.js'
	export default{
		components:{

		},
		computed:{
			isDisabled(){
				return this.selects.length < 1 || this.isLoading
			},
			isSelectAll(){
				if (this.selects.length < 1){
					return false
				}
				return this.selects.length == this.dataList.length
			},
		},
		data() {
			return {
				dataList: [],
				status: 'loadmore',
				photoBaseUrl: '',
				page_index: 0,
				has_more: true,
				selects: [],
				totalMoney:0,
				testNum:false,
				btnWidth: 130,
				isLoading: false,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: 'rgb(248, 36, 0)'
						}
					}
				]
			}
		},
		onLoad() {
			this.getDataList()
		},
		methods:{
			gotoGoodsDetails(_goodsId){
				this.$myRouter.push({name:'goods/details', params: { id: _goodsId }})
			},
			getDataList(){
				if (!this.has_more){
					return
				}
				this.page_index++
				let that = this
				that.$api.fenxiao.getGoodsFollowList({page:that.page_index}).then(res => {
					console.log(res)
					that.dataList = res.list
					that.photoBaseUrl = res.photo_base_url
					that.has_more = res.page_info.has_more
					that.status = that.has_more ? 'loadmore' : 'nomore';
				})
			},
			cartFormatPrice(_price){
				return _.formatNumber((_price / 100),'0.00');
			},
			uNumberBoxChange(_data){
				//console.log(_data)
				this.dataList[_data['index']]['num'] = _data['value']
			},
			isSelect(_item){
				return this.selects.filter(item => {
					return item.id == _item.id
				}).length > 0
			},
			selectBtnClick(_item){
				if (this.isSelect(_item)){
					this.selects = this.selects.filter(item => {
						return item.id != _item.id
					})
				}
				else {
					this.selects.push(_item)
				}
			},
			selectAll(e){
				if (this.isSelectAll){
					this.selects = [].concat()
				}
				else {
					this.selects = this.dataList.concat()
				}
			},
			swipeActionOpen(index){
				let that = this
				that.dataList[index].show = true;
				that.dataList.map((val, idx) => {
					if(index != idx) that.dataList[idx].show = false;
				})
			},
			swipeActionClick(index,btnIndex){
				let that = this
				if(btnIndex == 0) {
					that.postDel([that.dataList[index].id],function(){
						that.dataList.splice(index, 1);
					})
					// this.$u.toast(`删除了第${index}个cell`);
				}
			},
			postDel(ids,fn){
				this.$api.fenxiao.delGoodsFollow({ids:ids}).then(res => {
					console.log(res)
					fn()
				})
			},
			settlement(){
				let that = this
				if(that.isDisabled){
					return
				}
				uni.showModal({
					content: '确认删除所选吗？',
					success(e) {
						console.log(e)
						if (e.confirm !== true){
							return
						}
						
						that.isLoading = true
						setTimeout(function() {
							that.isLoading = false
						}, 3000);
						let ids = that.selects.map(item => {
							return item.id
						})
						that.postDel(ids,function () {
							that.$u.toast(`删除成功`);
							that.isLoading = false
							that.selects = [].concat()
							that.dataList = [].concat()
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.shopping-cart{
		.empty{
			margin-top: 300rpx;
		}
	}
	.cart-list{
		padding-bottom: 100px;
		.cart-item{
			min-height: 200rpx;
			background-color: #FFF;
			padding: 20rpx;
			display: flex;
			margin-bottom: 10px;

			.select-btn{
				display:flex;
				justify-content: center;
				align-items: center;
				text-align: center;
			}

			.goods-box{
				display: flex;


				.pictrue{
					width: 160rpx;
					height: 160rpx;
				}
				.info{
					margin-left: 20upx;
					.goods-name{
						display: -webkit-box;
						overflow:hidden;
						text-overflow: ellipsis;
						width: 61vw;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.specs{
						margin-top: 5px;
						color: #868686;
						font-size: 28rpx;
					}
					.money{
						margin-top: 5px;
						display: flex;
						justify-content:space-between;

						.text{
							color: $gdbase-type-primary;
							font-size: 32rpx;
							font-weight: 700;
						}
					}
				}
			}
		}
	}
	.cart-item .goods-box .pictrue .img{
		width: 100%;
		height: 100%;
	}
	.cart-bar{
		display: flex;
		background-color: #FFF;
		border-top: 1px solid #CCC;
		min-height: 100rpx;
		position: fixed;
		width: 100vw;
		/* #ifdef H5 */
		bottom: var(--window-bottom);
		/* #endif */
		/* #ifndef H5 */
		bottom: 0;
		/* #endif */
		justify-content:space-between;
		align-items:center;
		padding: 0 10px;
		z-index: 9999;

		.money{
			width: 50vw;
			text-align: right;
			
			padding-right: 10px;
			.total{
				font-size: 32rpx;
			}
			.discount{
				color: $gdbase-type-primary;
			}
		}
	}
	.addSite {
		display: flex;
		justify-content: space-around;
		width: 200rpx;
		line-height: 68rpx;
		background-color: $gdbase-type-primary;
		border-radius: 60rpx;
		font-size: 30rpx;
		.add{
			display: flex;
			align-items: center;
			color: #ffffff;
			.icon{
				margin-right: 10rpx;
			}
		}
		&.disabled{
			background-color: #CCC;
		}
	}
</style>
